<template>
  <div class="rtc-alert-box">
    <div class="rtc-alert-item">
      <div class="rtc-alert-avatar">
        <img src="../../../static/img/avatar@2x.png" />
      </div>
      <div class="rtc-alert-name">{{ callerIMName }}</div>
    </div>
    <div class="rtc-alert-item">
      <div class="rtc-alert-text">邀请你{{ text }}通话...</div>
      <div class="rtc-alert-button">
        <div>
          <img src="../../../static/img/hangupCall@2x.png" @click="refuse" />
        </div>
        <div>
          <img src="../../../static/img/acceptCall@2x.png" @click="accept" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "./webrtc.less";
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
    };
  },
  computed: {
    callerIMName() {
      return this.$store.state.agora.confr.callerIMName;
    },
    text() {
      let type = this.$store.state.agora.confr.type
      let text = type == 0 ? '语音': type == 1 ? '视频': '多人视频'
      return text;
    },
  },

  methods: {
    ...mapActions(["updateConfr", "answerCall", "setCallStatus", "hangup"]),

    // 同意
    accept() {
      console.log("同意");
      const answerCallStatus = 5;
      this.answerCall({ result: "accept" });
      this.setCallStatus(answerCallStatus);
    },
    // 拒绝
    refuse() {
      console.log("拒绝");
      this.answerCall({ result: "refuse" });
      console.log("Vue>>", Vue.$store.getters.getAgora);
      if (Vue.$store.getters.getAgora.callStatus < 7) {
        this.hangup();
      }
    },
  },

  components: {
    // Draggable,
  },

  mounted() {},
};
</script>

